<script setup>
import {updateConMyBasicInfo} from "@/api/contract/myContract.js";
import {formatAmountForInput} from "@/utils/contract.js";
import {getContractOperateMenu} from "@/utils/menu.js";
import {backMyConList} from "@/utils/backList.js";

const {proxy} = getCurrentInstance()
const {tradeType} = proxy.useDict(["tradeType", false])
const loading = ref(false)
const props = defineProps({
  contractInfo: {
    type: Object
  }
})
const hasPeriod = ref(false)
const data = reactive({
  docUpdateForm: {},
  rules: {
    name: [{required: true, message: "合同名称不能为空", trigger: 'change'}, {
      max: 100,
      message: "合同名称长度不能超过 100 个字符",
      trigger: 'manual',
    }],
    tradeCompany: [{ required: true,  message: "对方单位名称不能为空", trigger: 'change' }, { max: 255, message: "对方单位名称长度不能超过 255 个字符", trigger: 'change'}],
    dateRange: [{required: true, message: '请选择合同固定期限的起止日期'}],
    total: [{ required: true,  message: "合同金额不能为空", trigger: 'change' }, { pattern: /^(?:[1-9]\d*(?:\.\d{1,2})?|0(?:\.\d{1,2})?)$/, message: '请输入大于等于0的有效合同金额，做多可保留两位小数', trigger: 'change' }],
    memo: [{max: 255, message: "备注内容长度不能超过 255 个字符", trigger: 'change'}]
  }
})
const {docUpdateForm, rules} = toRefs(data)
const emits = defineEmits('getConBasicInfo')
const opMenuEnum = getContractOperateMenu()

watch(() => props.contractInfo, (newValue) => {
  if (newValue) {
    docUpdateForm.value = props.contractInfo
    docUpdateForm.value.dateRange = [props.contractInfo.beginPeriodTime, props.contractInfo.endPeriodTime]
  }
})

function updateConBasicInfo() {
  proxy.$refs["docUpdateFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      updateConMyBasicInfo(proxy.addDateRange(docUpdateForm.value, 'PeriodTime')).then(() => {
        loading.value = false
        proxy.$modal.msgSuccess("保存成功")
        emits("getConBasicInfo")
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

const changHasPeriod = (val) => {
  hasPeriod.value = val
}

</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="docUpdateForm" :rules="rules" ref="docUpdateFormRef"
               v-loading="loading" label-position="top" label-width="auto">
        <el-row>
          <el-form-item>
            <el-button @click="backMyConList">返 回</el-button>
            <el-button type="primary" @click="updateConBasicInfo()">保 存</el-button>
          </el-form-item>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同编号">
              <el-input v-model="docUpdateForm.conNo" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="订单编号">
              <el-input v-model="docUpdateForm.orderNo"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="文件模板">
              <el-input v-model="docUpdateForm.fileTemplateName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="固定格式">
              <el-input v-model="docUpdateForm.isFixedFormat" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同名称" prop="name">
              <el-input v-model="docUpdateForm.name" placeholder="请输入合同名称" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="对方单位名称" prop="tradeCompany">
              <el-input v-model="docUpdateForm.tradeCompany" placeholder="对方单位名称" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同金额" prop="total">
              <el-input v-model="docUpdateForm.total" :formatter="formatAmountForInput" placeholder="合同金额最多可保留两位小数" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="买方方向" prop="tradeType">
              <el-select v-model="docUpdateForm.tradeType" placeholder="请选择">
                <el-option
                    v-for="dict in tradeType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同类型" prop="conType">
              <el-input v-model="docUpdateForm.conType" placeholder="请输入合同类型" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="3" :xs="24">
            <el-form-item label="合同期限">
              <el-switch
                  v-model="docUpdateForm.hasPeriod"
                  inline-prompt
                  active-text="有固定期限"
                  active-value="是"
                  inactive-text="无固定期限"
                  inactive-value="否"
                  style="--el-switch-on-color: #529b2e; --el-switch-off-color: #6379bb"
                  @change="changHasPeriod"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9" :xs="24" v-show="docUpdateForm.hasPeriod==='是'">
            <el-form-item label="固定期限范围" prop="dateRange" :required="docUpdateForm.hasPeriod==='是'">
              <el-date-picker
                  v-model="docUpdateForm.dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input v-model="docUpdateForm.memo" type="textarea" placeholder="可输入备注信息，请勿超过 255 个字符"
                        maxlength="255"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  .el-input__inner {
    -webkit-text-fill-color: #606266;
  }
}
</style>